<script setup>
import { Lock, User } from "@element-plus/icons-vue";
import router from "@/router";
import { reactive, ref } from "vue";
import UserService from "../stores/UserService"
import axios from "axios";
document.title = '登录页 -- 图书借阅系统'
const obj=reactive({
  username : '',
  password : ''
})
const radio = ref(0)


const login = async () => {
  
  
  const [err, res] = await UserService.promise_process(UserService.login_axios(obj.username, obj.password, radio.value));
  
  if(err){
    console.log(err)
    alert("请求服务器失败")
  }
  if(res){
    //登录失败
    if(res.code == 0){
       console.log(res)
       ElMessage({
          message: '用户名或密码错误',
          type: 'error',
        })
    }
    //登录成功
    else{     
       let account = res.data
       let loginAccount = {
          id  : account.ReaderID,
          name: account.ReaderName,
          authority: account.authority
        }  
        console.log(loginAccount)
        //将登录的用户id 、名字和 权限等级存入session
        window.sessionStorage.setItem('loginAccount', JSON.stringify(loginAccount))
      switch(loginAccount.authority){
        case 0:   router.push('/user/index'); break;
        case 1:   router.push('/admin/borrow'); break;
        case 2:   router.push('/admin/system'); break;
        default: break;
      }
    }
  }

}
//以游客身份登录
const enter = () =>{
  router.push('/user/index')
}
</script>

<template>
  <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/login">Login</router-link>
  </nav>
  <div class="signon">
    <el-row style="height: 100%">
      <el-col :span="16">
        <el-image
          src="https://i.328888.xyz/2023/04/26/ivszUa.jpeg"
          style="
            height: 100%;
            border-bottom-left-radius: 10px;
            border-top-left-radius: 10px;
          "
        />
        <div class="welcomWord">
          <div>欢迎来到图书馆!</div>
        </div>
      </el-col>
      <el-col :span="8">
        <h1>登录</h1>
        <el-radio-group
          style="margin-top: 20px"
          v-model="radio"
        >
          <el-radio-button label="0">用户</el-radio-button>
          <el-radio-button label="1">图书管理员</el-radio-button>
          <el-radio-button label="2">系统管理员</el-radio-button>
        </el-radio-group>
        <el-divider />
        <el-form class="form">
          <el-form-item label="账号" style="margin-bottom: 10%">
            <el-input v-model="obj.username" type="text">
              <template #prefix>
                <el-icon><User /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item label="密码" style="margin-bottom: 10%">
            <el-input v-model="obj.password" type="password">
              <template #prefix>
                <el-icon><Lock /></el-icon>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 10%">
            <el-button
              type="success"
              plain
              style="margin-left: 25%; width: 50%;margin-bottom: 5%;"
              @click="login"
            >
              登录
            </el-button>
            <el-button
              type="info"
              plain
              style="margin-left: 25%; width: 50%"
              @click="enter"
            >
              以游客身份进入
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.signon {
  border-radius: 10px;
  box-shadow: var(--el-box-shadow-light);
  width: 1085px;
  height: 487px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-color: 1px solid #8d9095;
}
.signon h1 {
  padding-top: 5vh;
}
.form {
  margin-top: 20%;
  width: 80%;
  margin-left: 10%;
  padding-bottom: 20px;
}
.welcomWord {
  position: absolute;
  color: whitesmoke;
  font-size: 25px;
  font-weight: bold;
  bottom: 5%;
  left: 2%;
}
nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
